<template>
  <div class="main-container">
    <header>
      <h1>前途无忧 - 人才招聘平台</h1>
      <NavBar/>
      <SearchBar @input='handleInput' @search='handleSearch'/>
      <JobMenu/>
    </header>

    <!-- 新增部分 -->
    <div class="form-container">
      <div class="form-group">
        <label for="name">姓名</label>
        <input id="name" v-model="formData.name" type="text" class="form-input" placeholder="请输入姓名"/>
      </div>
      <div class="form-group">
        <label for="age">年龄</label>
        <input id="age" v-model="formData.age" type="text" class="form-input" placeholder="请输入年龄"/>
      </div>
      <div class="form-group">
        <label for="gender">性别</label>
        <input id="gender" v-model="formData.gender" type="text" class="form-input" placeholder="请输入性别"/>
      </div>
      <div class="form-group">
        <label for="education">学历</label>
        <input id="education" v-model="formData.education" type="text" class="form-input" placeholder="请输入学历"/>
      </div>
      <div class="form-group">
        <label for="contact">联系方式</label>
        <input id="contact" v-model="formData.contact" type="text" class="form-input" placeholder="请输入联系方式"/>
      </div>
      <div class="form-group">
        <label for="introduction">个人介绍</label>
        <textarea id="introduction" v-model="formData.introduction" class="form-input" placeholder="请输入个人介绍"></textarea>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="button-container">
      <div @click="handleSubmit" class="clickable-box">
        提交
      </div>
    </div>

    <!-- 提交状态提示 -->
    <div v-if="submissionMessage" class="submission-message">
      {{ submissionMessage }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: '',
        education: '',
        contact: '',
        introduction: ''
      },
      submissionMessage: ''
    };
  },
  methods: {
    handleSubmit() {
      // 判断所有字段是否都已填写
      const allFilled = Object.values(this.formData).every(field => field.trim() !== '');

      if (allFilled) {
        this.submissionMessage = '提交成功';
      } else {
        this.submissionMessage = '有内容尚未填写';
      }
    }
  }
};
</script>

<style>
.main-container {
  text-align: center;
  padding: 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* 间隔 */
  margin: 20px auto;
  max-width: 600px; /* 控制宽度 */
}

.form-group {
  width: 100%;
}

label {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  text-align: left;
}

.form-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

textarea.form-input {
  height: 100px;
  resize: vertical;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.clickable-box {
  width: 300px; /* 设置宽度一致 */
  padding: 20px;
  font-size: 18px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.clickable-box:hover {
  background-color: #e2e6ea;
}

.clickable-box:active {
  background-color: #d6d9db;
}

.submission-message {
  margin-top: 20px;
  font-size: 18px;
  color: #ff0000;
}
</style>